<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>线性渐变</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 80px;
			}
			#div1{
				/*默认为从上往下渐变*/
				background-image: linear-gradient(yellow,green);
			}
			#div2{
				/*to right从左往右渐变，to left从右往左渐变*/
				background-image: linear-gradient(to right,yellow,green);
			}
			#div3{
				/*to right bottom从左上角往右下角渐变，to left top从右下角往左上角渐变*/
				background-image: linear-gradient(to right bottom,red,green);
			}
			#div4{
				/*使用红、黄、绿三个节点从右往左渐变，它们的透明度分别为0.6、0.7、0.7*/
				background-image: linear-gradient(to left,rgb(255,0,0,0.6),rgb(255,255,0,0.7),rgb(0,128,0,0.7));
			}
		</style>
	</head>
	<body>
		<h4>从上往下渐变</h4>
		<div id="div1"></div>
		<h4>从左往右渐变</h4>
		<div id="div2"></div>
		<h4>从左上角到右下角渐变</h4>
		<div id="div3"></div>
		<h4>使用多颜色节点，渐变的同时设置其透明度</h4>
		<div id="div4"></div>
	</body>
</html>
